<!--
 * @Author: zhudunfeng 2101580047@qq.com
 * @Date: 2025-07-25 23:34:45
 * @LastEditors: zhudunfeng 2101580047@qq.com
 * @LastEditTime: 2025-08-03 12:34:00
 * @FilePath: \jptt-front\src\components\FilmItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import type { Film } from '@/types/types' // Adjust the import path as necessary
const props = defineProps<{
  video: Film
}>()

// 格式化时长为 MM:SS 格式
const formatDuration = (seconds: number) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 格式化观看次数（如：1.2万）
const formatViews = (views: number) => {
  if (views >= 10000) {
    return (views / 10000).toFixed(1) + '万'
  }
  return views.toString()
}
</script>
<template>
  <div class="video-thumbnail">
    <img :src="video.coverUrl" :alt="video.title" class="thumbnail-img" />
    <div class="duration-badge">{{ formatDuration(video.duration ?? 0) }}</div>
    <div class="play-icon"><el-icon>
        <Play />
      </el-icon></div>
    <div v-if="video.updateStatus" class="update-badge">更新至{{ video.latestEpisode }}集</div>
  </div>
  <div class="video-info">
    <h3 class="video-title">{{ video.title }}</h3>
    <div class="video-meta">
      <span class="view-count">{{ formatViews(video.views ?? 0) }}次观看</span>
    </div>
  </div>
</template>
<style scoped lang="scss">
// 基础样式变量使用base.scss中的 - 仅保留Web端所需
@use '/src/assets/_variables.scss' as variables;

// 视频缩略图
.video-thumbnail {
  position: relative;
  border-radius: variables.$radius;
  overflow: hidden;
  aspect-ratio: 2/3; // 标准竖屏比例
  box-shadow: variables.$shadow;
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: variables.$transition;

  .video-card:hover & {
    transform: scale(1.03);
  }
}

// 时长标签
.duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: variables.$white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

// 更新标签
.update-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: variables.$primary-color;
  color: variables.$white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

// 播放图标
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: variables.$white;
  font-size: 40px;
  opacity: 0;
  transition: variables.$transition;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

  .video-card:hover & {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

// 视频信息
.video-info {
  padding-top: 12px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: variables.$gray-dark;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 45px;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: variables.$gray-medium;
  margin-top: 6px;
}
</style>
